<template>
  <div class="line_display">
    <!-- 折线图、面积图 -->
    <div class="gao_liang">
      <div class="gao_liang_title">高亮显示</div>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">放大效果</span>
          <a-tooltip>
            <template slot="title">
              是否开启 hover 在拐点标志上的放大效果。
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-switch checked-children="开" un-checked-children="关" v-model="form.display.series[0].emphasis.scale" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">聚焦效果</span>
          <a-tooltip>
            <template slot="title">
              在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-radio-group v-model="form.display.series[0].emphasis.focus">
            <a-radio value="none">
              无
            </a-radio>
            <a-radio value="self">
              聚焦当前
            </a-radio>
            <a-radio value="series">
              聚焦系列
            </a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </div>
    <div class="gao_liang">
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
          <div class="gao_liang_title">目标线</div>
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">显示</span>
          <a-tooltip>
            <template slot="title">
              是否开启目标线
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-switch checked-children="是" un-checked-children="否" v-model="form.display.markLine.show" />
        </a-col>
      </a-row>
      <a-row style="margin-top: 10px;">
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">数据</span>
          <a-tooltip>
            <template slot="title">
              每个数组项可以是一个两个值的数组，分别表示线的起点和终点，每一项是一个对象
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20" class="mu_biao_xian">
          <a-input v-model="form.display.markLine.data[0].name" placeholder="请输入显示名称" :disabled="!form.display.markLine.show "></a-input>
          <a-input v-model="form.display.markLine.data[0].yAxis" placeholder="请输入目标值" :disabled="!form.display.markLine.show  "></a-input>
        </a-col>
      </a-row>
    </div>
    <div class="gao_liang">
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
          <div class="gao_liang_title">图例</div>
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">显示</span>
          <a-tooltip>
            <template slot="title">
              是否开启图例的显示
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-switch checked-children="是" un-checked-children="否" v-model="form.display.legend.show" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">排列方向</span>
          <a-tooltip>
            <template slot="title">
              图例列表的布局朝向
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-radio-group v-model="form.display.legend.orient" :disabled="!form.display.legend.show">
            <a-radio value="horizontal">
              水平
            </a-radio>
            <a-radio value="vertical">
              垂直
            </a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
      <a-row style="margin-top: 10px;">
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">图例位置</span>
          <a-tooltip>
            <template slot="title">
              图例组件离容器四侧的距离，
              可以是像 20 这样的具体像素值，可以是像 '20%' 这样相对于容器高宽的百分比，也可以是 'left', 'center', 'right'。
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20" class="tu_li_position">
          <a-input placeholder="上" v-model="form.display.legend.top" :disabled="!form.display.legend.show"></a-input>
          <a-input placeholder="右" v-model="form.display.legend.right" :disabled="!form.display.legend.show"></a-input>
          <a-input placeholder="下" v-model="form.display.legend.bottom" :disabled="!form.display.legend.show"></a-input>
          <a-input placeholder="左" v-model="form.display.legend.left" :disabled="!form.display.legend.show"></a-input>
        </a-col>
      </a-row>
    </div>
    <div class="gao_liang">
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
          <div class="gao_liang_title">工具栏</div>
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">显示</span>
          <a-tooltip>
            <template slot="title">
              是否显示工具栏组件
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-switch checked-children="是" un-checked-children="否" v-model="form.display.toolbox.show" />
        </a-col>
      </a-row>
      <a-row style="margin-top: 10px;">
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">工具箱</span>
          <a-tooltip>
            <template slot="title">
              各工具配置项
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-checkbox-group v-model="form.display.toolbox.feature" :disabled="!form.display.toolbox.show">
            <a-checkbox value="saveAsImage" name="type">
              保存图片
            </a-checkbox>
            <a-checkbox value="dataView" name="type">
              数据视图
            </a-checkbox>
          </a-checkbox-group>
        </a-col>
      </a-row>
    </div>
    <div class="gao_liang">
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4">
          <div class="gao_liang_title">线条</div>
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20"></a-col>
      </a-row>

      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">平滑处理</span>
          <a-tooltip>
            <template slot="title">
              是否平滑曲线显示
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-switch checked-children="是" un-checked-children="否" v-model="form.display.series[0].smooth" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :xs="10" :sm="8" :md="7" :lg="5" :xl="4" style="text-align: right;">
          <span style="margin-right: 8px;">线条类型</span>
          <a-tooltip>
            <template slot="title">
              线的类型
            </template>
            <a-icon type="exclamation-circle" />
          </a-tooltip>
          ：
        </a-col>
        <a-col :xs="14" :sm="16" :md="17" :lg="19" :xl="20">
          <a-radio-group v-model="form.display.series[0].lineStyle.type">
            <a-radio value="solid">
              正常
            </a-radio>
            <a-radio value="dashed">
              虚线
            </a-radio>
          </a-radio-group>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import bus from '@/views/components/bus';
  export default {
    props: ['display', 'form'],
    data() {
      return {}
    },
    methods: {
      onSubmit () {
        const _chartForm = this.form.display
        if (!_chartForm.series[0].emphasis.focus) return  false
        if (_chartForm.markLine.show) {
          if (!(_chartForm.markLine.data[0].name&&_chartForm.markLine.data[0].yAxis)) return  false
        }
        if (_chartForm.toolbox.show) {
          if (!_chartForm.toolbox.feature.length) return  false
        }
        if (!_chartForm.series[0].lineStyle.type) return  false

        return  true
      },
    },
    mounted() {
      bus.$on('verifyForm',(back)=>{
        back(this.onSubmit())
      }) 
    },
    beforeDestroy() {
      bus.$off('verifyForm')
    },
  }
</script>

<style scoped>
.gao_liang_title {
  font-size: 16px;
  font-weight: 500;
  color: rgba(0, 0, 0, .85);
}

.gao_liang div {
  line-height: 35px;
}

.mu_biao_xian {
  display: flex;
  justify-content: space-around;
}

.mu_biao_xian input {
  width: 45%;
}

.tu_li_position {
  display: flex;
  justify-content: space-around;
}

.tu_li_position input {
  width: 19%;
}

.gao_liang_title {
  text-indent: 10px;
}
</style>